<template>
    <div>
        <router-link 
        to="/"  
        class="header-abs"
        v-show="showAbs"
        >
            <span class="iconfont header-abs-back">&#xe624;</span>
        </router-link>
        <div class="header-fixed" 
        v-show="!showAbs"
        :style="opacityStyle"
        >
            <router-link to="/">
                <div class="iconfont header-fixed-back">&#xe624;</div>
            </router-link>
            景点详情
        </div>
    </div>
</template>
<script>

export default {
    name:'DetailHeader',
    data(){
        return{
            showAbs:true,
            opacityStyle:{
                opacity:0
            }
        }
    },
    methods:{
        handleScroll(){
            const top = document.documentElement.scrollTop
            if(top>60){
                let opacity = top/140
                opacity = opacity>1?1:opacity 
                this.opacityStyle={opacity}//键值相等所以写一个
                this.showAbs=false
            }else{
                this.showAbs=true
            }
            // console.log(document.documentElement.scrollTop)
        }
    },
    activated(){
        window.addEventListener("scroll",this.handleScroll)
    },
    deactivated(){//叶面即将隐藏或者页面即将被替换掉就会执行这个钩子
        window.removeEventListener("scroll",this.handleScroll)
    }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
    .header-abs
        position:absolute
        left:.2rem
        top:.2rem
        widtH:.8rem
        height:.8rem
        line-height:.8rem
        text-align:center
        border-radius:.4rem
        background:rgba(0,0,0,.8)
        .header-abs-back
            color:#fff
            font-size:.4rem
    .header-fixed
        z-index: 2 
        position: fixed
        top:0
        left:0
        right:0
        height: $headerHeight
        line-height: $headerHeight
        text-align:center
        color:#fff
        background:$bgColor
        font-size: .32rem
        .header-fixed-back
            position:absolute
            top:0
            left:0
            width: .64rem
            text-align: center
            font-size: .4rem
            color:#fff
</style>